import React, { useState, memo } from 'react'
import dayjs from 'dayjs'
import { Picker, List, Calendar, Button, Toast } from 'antd-mobile'
import { history } from 'umi'

type Citys = {
    label: string,
    value: string
}

type Props = {
    citys: [Citys[]] | undefined | boolean | any,
    citysLoading: boolean | undefined
}

const search: React.FC<Props> = (props) => {
    const [selectedCity, setSelectedCity] = useState<Array<string>>(['10001'])
    const [times, setTimes] = useState('可选时间')
    const [dateShow, setDateShow] = useState<boolean>(false)

    const handelCityChange = (v: any) => {
        setSelectedCity(v)
    }
    const handelDateShow = () => {
        setDateShow(!dateShow)
    }
    const handelDateConfirm = (startTime: any, endTime: any) => {
        handelDateShow()
        setTimes(dayjs(startTime).format('YYYY-MM-DD') + '~' + dayjs(endTime).format('YYYY-MM-DD'))
    }
    const handelSearch = () => {
        if(times.includes('~')){
            history.push({
                pathname: '/search',
                query: {
                    code: selectedCity,
                    startTime: times.split('~')[0],
                    endTime: times.split('~')[1]
                }
            })
        }else {
            Toast.info('请设置搜索日期')
        } 
    }

    return (
        <div className="search">
            {/* 可选区域 */}
            <div className="search-addr">
                {!props.citysLoading &&
                    <Picker title="城市" data={props?.citys} value={selectedCity} cascade={false} cols={1} onChange={handelCityChange} >
                        <List.Item>可选城市</List.Item>
                    </Picker>
                }
            </div>
            {/* 可选时间 */}
            <div className="search-time" onClick={handelDateShow}>
                <p className="search-time_left">出租时间</p>
                <p className="search-time_right">{times}</p>
            </div>
            <Calendar visible={dateShow} onCancel={handelDateShow} onConfirm={handelDateConfirm} ></Calendar>
            {/* 搜索按钮 */}
            <Button type="primary" size="large" onClick={handelSearch}>搜索</Button>
        </div>
    )
}

export default memo(search)